<template>
  <div id="app">
    <!-- <nav-box></nav-box> -->
    <div id="nav"></div>
    <transition :name="transitionName">
      <router-view></router-view>
    </transition>
    <footer-box></footer-box>
  </div>
</template>
<script>
import Nav from "./components/shopping/nav";
import Footer from "./components/shopping/footer";
export default {
  name: "home",
  data() {
    return {
      transitionName: "",
    };
  },
  components: {
    "footer-box": Footer,
    "nav-box": Nav
  },
  watch: {
    $route(to, from) {
      if (to.meta.index > from.meta.index) {
        this.transitionName = "slid-left";
      }
      if (to.meta.index < from.meta.index) {
        this.transitionName = "slid-right";
      }
    }
  }
};
</script>
<style>
/* 公共样式 */
body {
  margin: 0px !important;
  background: #f7f7f7 !important;
}
a {
  text-decoration: none;
  color: #959595;
}
p {
  padding: 0px;
  margin: 0px;
}
ul {
  margin: 0;
  padding: 0;
}
.header {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}
div.header_header {
  text-align: center;
}
body {
  background: #f5f5f5;
}
.home {
  padding-bottom: 60px;
  position: relative;
  overflow-x: auto;
  min-height: 675px;
}
/* end */
/* 路由切换动画 */
.slid-left-enter-active,
.slid-left-leave-active,
.slid-right-enter-active,
.slid-right-leave-active {
  will-change: transform;
  transition: all 0.5s;
  position: absolute;
}
.slid-left-enter {
  transform: translate3d(100%, 0, 0);
}
.slid-left-leave-active {
  transform: translate3d(-100%, 0, 0);
}
.slid-right-enter {
  transform: translate3d(-100%, 0, 0);
}
.slid-right-leave-active {
  transform: translate3d(100%, 0, 0);
}
/**/
.slid-enter-active,
.slid-leave-active {
  will-change: transform;
  transition: all 0.5s;
  position: absolute;
}
.slid-enter {
  transform: translate3d(-100%, 0, 0);
}
.slid-leave-active {
  transform: translate3d(-100%, 0, 0);
}
</style>
